//
// Project Wok
//
// Copyright IBM Corp, 2015-2017
//
// Licensed under the Apache License, Version 2.0 (the 'License');
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an 'AS IS' BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

@import '../vendor/bootstrap-sass/bootstrap/mixins';
//
// Menu-Flat Drop-Down
// --------------------------------------------------
// Dropdown arrow/caret

.btn-group > .menu-flat.dropdown,
.btn-group > .menu-flat.dropup {
    display: inline-block;
    &.hidden {
        display: none;
    }
}

.btn-group > .menu-flat {
    .btn,
    .dropdown-menu {
        min-width: 130px !important;
    }
}

.btn-group > .menu-flat[class*="action"],
.btn-group > .menu-flat[class*="actions"] {
    .btn,
    .dropdown-menu {
        min-width: 160px !important;
    }
}

.menu-flat {
    .btn {
        background: $wok-dropdown !important;
        min-width: 160px;
        border: 0 !important;
        font-family: $font-family-bold;
        font-weight: 700;
        font-size: $font-size-btn;
        text-align: left;
        position: relative;
        height: 40px;
        padding: 4px 45px 5px 45px;
        & > i {
            font-size: 22px;
            vertical-align: bottom;
            width: 26px;
            height: 40px;
            text-align: left;
            display: block;
            position: absolute;
            top: 0;
            left: 6px;
        }
        // This rule will allow to use different icons for the drop-down button instead of the default .edit-alt class
        & > i:first-child {
            left: 12px;
            text-align: center;
        }
        & > i:before {
            line-height: 40px;
        }
    }
    .caret {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: 40px;
        height: 40px;
        margin-left: 0;
        vertical-align: middle;
        border-top: 0;
        border-top: 0 \9;
        border-right: 0;
        border-left: 0;
        &:before {
            content: '\f078';
            font: normal normal normal 14px/1 FontAwesome;
            speak: none;
            display: inline-block;
            text-decoration: inherit;
            width: 1.2em;
            height: 1.2em;
            margin: .5em .85em;
            text-align: center;
            font-variant: normal;
            text-transform: none;
            line-height: 2em;
        }
    }
    // The dropdown wrapper (div)
    &.dropup,
    &.dropdown {
        position: relative;
    }
    // Prevent the focus on the dropdown toggle when closing dropdowns
    .dropdown-toggle:focus {
        outline: 0;
    }
    // The dropdown menu (ul)
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: $zindex-dropdown;
        display: none; // none by default, but block on "open" of the menu
        float: left;
        min-width: 160px;
        padding: 0;
        margin: 0; // override default ul
        list-style: none;
        font-size: $font-size-btn;
        text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
        background-color: $menu-flat-dropdown-bg;
        border: 0;
        border-radius: 0;
        box-shadow: none !important;
        background-clip: padding-box;
        // Aligns the dropdown menu to right
        //
        // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
        &.pull-right {
            right: 0;
            left: auto;
        }
        // Dividers (basically an hr) within the dropdown
        .divider {
            @include nav-divider($menu-flat-dropdown-divider-bg);
        }
        > li.wok-hide-action-item {
            display: none;
        }
        > li > a {
            border-top: 1px solid $menu-flat-dropdown-border;
            @include box-shadow(inset 0px 1px 0px 0px $menu-flat-dropdown-divider-bg);
        }
        > li:first-child > a {
            border-top: 1px solid $menu-flat-dropdown-bg;
            box-shadow: none;
        }
        > li.critical:last-child > a,
        > li.critical:last-child > a:hover {
            box-shadow: none;
        }
        // Links within the dropdown menu
        > li > a {
            cursor: pointer;
            display: block;
            padding: 4px 6px;
            clear: both;
            font-weight: normal;
            line-height: $line-height-menu-flat;
            color: $menu-flat-text;
            white-space: nowrap; // prevent links from randomly breaking onto new lines
            > i {
                font-size: 22px;
                margin-left: 8px;
                vertical-align: middle;
                width: 26px;
                height: 26px;
                text-align: left;
                display: inline-block;
            }
        }
    }
    // Hover/Focus state
    .dropdown-menu > li > a {
        &:hover,
        &:focus {
            text-decoration: none;
            color: $menu-flat-dropdown-link-hover-color;
            background-color: $menu-flat-dropdown-link-hover-bg;
        }
    }
    // Active state
    .dropdown-menu > .active > a {
        &,
        &:hover,
        &:focus {
            color: $menu-flat-dropdown-link-active-color;
            text-decoration: none;
            outline: 0;
            background-color: $menu-flat-dropdown-link-active-bg;
        }
    }
    .dropdown-menu > li.critical > a,
    .dropdown-menu > li.critical > a:hover {
        background: $menu-flat-dropdown-critical-bg;
    }
    .dropdown-menu > li.critical.disabled > a,
    .dropdown-menu > li.critical.disabled > a:hover {
        background-color: $menu-flat-dropdown-link-hover-bg;
    }
    // Disabled state
    //
    // Gray out text and ensure the hover/focus state remains gray
    .dropdown-menu > .disabled > a {
        &,
        &:hover,
        &:focus {
            color: $dropdown-link-disabled-color;
        }
        // Nuke hover/focus effects
        &:hover,
        &:focus {
            text-decoration: none;
            background-color: transparent;
            background-image: none; // Remove CSS gradient
            @include reset-filter;
            cursor: $cursor-disabled;
        }
    }
    // Open state for the dropdown
    &.open {
        .btn {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
        // Show the menu
        > .dropdown-menu {
            display: block;
        }
        .caret {
            background: #3a393b;
        }
        .caret:before {
            content: '\f077';
        }
        // Remove the outline when :focus is triggered
        > a {
            outline: 0;
        }
    }
}

// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
    left: auto !important; // Reset the default from `.dropdown-menu`
    right: 0 !important;
}

// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
    left: 0 !important;
    right: auto !important;
}

// Dropdown section headers
.dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: $font-size-small;
    line-height: $line-height-base;
    color: $dropdown-header-color;
    white-space: nowrap; // as with > li > a
}

// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: ($zindex-dropdown - 10);
}

// Right aligned dropdowns
.pull-right > .dropdown-menu {
    right: 0;
    left: auto;
}

// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
    // Reverse the caret
    .caret {
        border-top: 0;
        border-bottom: $caret-width-base dashed;
        border-bottom: $caret-width-base solid \9; // IE8
        content: "";
    }
    // Different positioning for bottom up menu
    .dropdown-menu {
        top: auto;
        bottom: 100%;
        margin-bottom: 2px;
    }
}

// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
@media (min-width: $grid-float-breakpoint) {
    .navbar-right {
        .dropdown-menu {
            right: 0;
            left: auto;
        }
        // Necessary for overrides of the default right aligned menu.
        // Will remove come v4 in all likelihood.
        .dropdown-menu-left {
            left: 0;
            right: auto;
        }
    }
}
